import Vue from 'vue'
import Component from 'vue-class-component'
import '../topic/topicStyle.css'
import OrderItemClass from './component/orderItem.js'
@Component
export default class OrderColumnClass extends Vue {
  loading = false
  wrapperHeight = 0
  list = []

  created() {
    this.wrapperHeight = document.documentElement.clientHeight
  }

  mounted() {
    for (let i = 1; i <= 30; i++) {
      this.list.push(i)
    }
  }

  loadMore() {
    this.loading = true
    setTimeout(() => {
      let last = this.list[this.list.length - 1]
      for (let i = 1; i <= 10; i++) {
        this.list.push(last + i)
      }
      this.loading = false
    }, 2500)
  }

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  createItems() {
    const item = this.list.map(value => {
      return <OrderItemClass itemValue={{}}></OrderItemClass>
    })
    return item
  }

  toUrl() {
    this.$router.push({path: '/AddTopic'})
    console.log('22')
  }

  render() {
    return (
      <div class="content">
        <mt-header class="header" fixed title="订单">
          <mt-button icon="search" slot='right' onClick={() => { this.$router.push({name: 'search', params: {type: '订单'}}) }}></mt-button>
          <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>

        </mt-header>

        <div style='-webkit-overflow-scrolling: touch;' class="pageScroll" ref="wrapper" style={this.caculateHeight} v-infinite-scroll={this.loadMore} infinite-scroll-disabled={this.loading}
             infinite-scroll-distance="0">
          <div>
            {this.createItems()}
          </div>
          <p v-show={this.loading} class="loading">
            <mt-spinner type="fading-circle"></mt-spinner>
            加载中...
          </p>
        </div>
      </div>
    )
  }
}
